<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/5 xl:w-1/6" @click="handleCheck" :fetchFn="getClassifyTreeByPatent"
      :treeParam="{ parentClassifyId: '1838836075544449024' }" />
    <div class="main-container">
      <CommonDateSearch ref="searchRef" :immediate="false" @search="handleSearch"></CommonDateSearch>
      <div class="content-box">
        <div class="content-container">
          <a-card class="common-card flex chart-box" title="本周期数据">
            <Line ref="barRef" class="bar"></Line>
          </a-card>
          <div class="chart-box">
            <Ratio ref="tableRef" class="ratio"></Ratio>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts"
  setup>
  import { reactive, ref } from 'vue'
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'
  import { PageWrapper } from '@/components/Page'
  import DeptTree from './DeptTree.vue'
  import Bar from './Bar.vue'
  import Line from './Line.vue'
  import Ratio from '@/views/dataReport/energyComparison/Ratio.vue'
  import { getClassifyTreeByPatent } from '@/api/collection/classify';

  defineOptions({ name: 'Deviceanagement' })

  let barRef = ref()
  let tableRef = ref()
  let searchRef = ref()

  const searchInfo = reactive<Recordable>({})

  const handleSearch = (params) => {
    Object.assign(searchInfo, params)
    refreshData(searchInfo)
  }

  function refreshData(searchInfo) {
    barRef.value.getData(searchInfo)
    tableRef.value.getData(searchInfo)
  }

  function handleCheck(keys) {
    searchInfo.classifyIdList = keys
    searchRef.value.handleSearch()
  }
</script>
<style scoped
  lang="less">
  .main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .content-box {
      display: flex;
      flex: 1;
      overflow: auto;
      background: #fff;

      .content-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin: 8px;
        overflow-x: hidden;
      }

      .chart-box {
        flex: 1;
        flex-shrink: 0;
        min-height: 340px;
        overflow: hidden;

        :deep(.ant-table-wrapper),
        :deep(.ant-card-head) {
          padding: 0;
        }

        :deep(.ant-card-body) {
          padding: 8px 0;
        }
      }

    }
  }
</style>
